<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>javascript 一个页面多个tab选项卡效果</title>	
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<script>
		window.onload = function(){
			var main = document.getElementById("tabMain");
			var tab = new Tab(main);
			tab.init();
		}
			function Tab(id){
				this.aLi=id.getElementsByTagName("li");
				this.oDiv=id.getElementsByTagName("div");
			}
			Tab.prototype.init = function(){
				var obj =this;//tab实例化对象
				for(var i=0;i<obj.aLi.length;i++){
					obj.aLi[i].index = i;//给li添加一个索引
					obj.aLi[i].onclick=function(){
							obj.fnClick(this);//this当前点击的元素li
					}

				}
			}
			Tab.prototype.fnClick=function(aLi){
				//alert(this);  //li
				for (var i =0;i<this.aLi.length;i++) 
				{
					this.aLi[i].className = "";
					this.oDiv[i].style.display = "none";
				}
				aLi.className = "active";
				this.oDiv[aLi.index].style.display = "block";
			};
		</script>
		<style>
			*{padding: 0;margin: 0; list-style: none;}
			.tabMenu{width:300px;  margin:50px auto 0 auto;}
			.tabMenu ul{display: block; overflow: hidden;width:300px;height: 40px;background: #eee;}
			.tabMenu ul li{ cursor:pointer;display: block;float: left;width:100px; text-align: center;height: 40px; line-height: 40px;font-size:16px;}
			.tabMenu ul li.active{ background:orange;color:#fff;}
			.tabMenu .tabSide{display: none;padding:10px; line-height: 20px;white-space:pre-wrap; word-break:break-all;width:278px;border:solid 1px #eee; }
			.tabMenu div.active{ display: block;padding:10px; line-height: 20px;white-space:pre-wrap; word-break:break-all;width:278px;border:solid 1px #eee;
				 }
		</style>
	</head>
	<body>
		<div id="tabMain" class="tabMenu">		
			<ul>
				<li class="active">前端欧巴</li>
				<li>前端欧尼</li>
				<li>前端大叔</li>
			</ul>						
			<div class="tabSide active">日月如梭，在这微寒的秋，趴在窗台上望向不远处的青砖黛瓦，天光寥落，仿若带着幽微馥郁的心境，漫步在苍凉的深夜里，满身沐浴着幽蓝的星光，捧在手心，透露出斑驳的光，那些交织在一起，婆娑错落的印痕，仿佛是与生俱来的宿命。</div>
			<div class="tabSide">人生若只如初见，那冥冥中注定的惊鸿一瞥，定格一瞬间，却又转瞬即逝，带走了无限的想象空间和美好记忆。不必担心它如樱花般灿烂易逝，不必纠结于失去后的落寞忧伤，不必害怕它如华丽舞台般黯然谢幕。在对的时间，遇上了对的人，是一生幸福；在错的时间，遇上了对的人，是一阵叹息。有时候，失去比拥有美好。</div>
			<div class="tabSide">雨落无声，记忆搁浅。用心触摸着那丝丝微雨的柔美，透过时空的壁垒，苍老的故地，深沉的脚印，朦胧的身影，和那被岁月侵蚀的满怀柔情，在脑海里徘徊得太过杂乱无章，每当想要细细品味时，却不知从何道来。于是，只能介乎在半梦半醒之间，任沧桑褪尽昔日芳华，孜然一身，谱写出风花雪月的篇章</div>			
		</div>
		
	</body>
</html>